<template>
    <div>
        <a-descriptions title="地块信息" class="custom-table-layout"></a-descriptions>
        <BasicForm @register="registerForm" />
        <a-button type="primary" v-if="allowEdit" @click="handleSubmit">保存</a-button>
    </div>
</template>

<script lang="ts" setup>
import { toRaw } from 'vue';
import { BasicForm, useForm } from '/@/components/Form/index';
import { formSchema } from '../TPlot.data';
import { saveOrUpdate } from '../TPlot.api';
import { watch } from 'vue';
import { message } from 'ant-design-vue';
// Emits声明
const emit = defineEmits(['register', 'success', 'update:modelValue', 'changeColor']);
const props = withDefaults(
    defineProps<{
        modelValue: any,
        allowEdit?: boolean
    }>(),
    {
        allowEdit: true
    }
)
formSchema.map((item) => {
  if (item.field == 'fillColor') {
    item.componentProps.onchange = (e) => {
      emit('changeColor', {fillColor: e.target.value})
    }
  }
  if (item.field == 'strokeColor') {
    item.componentProps.onchange = (e) => {
      emit('changeColor', {strokeColor: e.target.value})
    }
  }
})
//表单配置
const [registerForm, { setProps,resetFields, setFieldsValue, validate }] = useForm({
    labelWidth: 150,
    schemas: formSchema,
    showActionButtonGroup: false,
    baseColProps: { span: 24 },
    layout: 'vertical',
    wrapperCol: { span: 24 },
    disabled: true,
});

watch(() => props.modelValue, async (data) => {
    if (data == null) {
        return;
    }
    console.log(data.polygon)
    await resetFields();
    await setFieldsValue(toRaw({
      area: (data.area/666.67).toFixed(2),
      attributes: data.attributes,
      bid: data.bid,
      id: data.id,
      name: data.name,
      polygon: data.polygon,
      fillColor: data.polygon.fillColor || '#1791fc',
      strokeColor:  data.polygon.strokeColor || '#FF33FF',
    }));
}, {
    deep: true
})
watch(()=>props.allowEdit,()=>{
    setProps({ disabled: !props.allowEdit })
})
//表单提交事件
async function handleSubmit() {
    try {
        
        let values = await validate();
        values.polygon =toRaw(props.modelValue).polygon
        values.polygon.strokeColor = values.strokeColor; 
        values.polygon.fillColor =  values.fillColor;
        delete values.strokeColor
        delete values.fillColor;
       
    //    if( typeof values.polygon == 'object' ){
            values.polygon = JSON.stringify(values.polygon);
        // }
        
        values.area *= 666.67;
       
        //提交表单
        let add = values.id.includes('new-');
        if( add ){
            delete values.id;
        }
        const stop = message.loading('正在保存')
        console.log(values)
        await saveOrUpdate(values,  !add);
        stop()
        //刷新列表
        emit('success');
        emit('update:modelValue', null)
    } finally {

    }
}
</script>
<script lang="ts"> 
export default {}
</script>
<style lang="less" scoped>
/** 时间和数字输入框样式 */
:deep(.ant-input-number) {
    width: 100%
}

:deep(.ant-calendar-picker) {
    width: 100%
}
</style>
